<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const goHome = () => {
  router.replace('/home')
}
</script>

<template>
  <div>
    <el-row>
      <el-col :span="12">
        <div class="left">
        </div>
      </el-col>
      <el-col :span="12">
        <div class="right">
          <p class="info">你访问的页面不存在</p>
          <p class="info1">管理员说你不能进入此页面</p>
          <p class="info2">请检查你的url是否正确，或点击下面按钮回到首页</p>
          <el-button style="margin-top: 20px;" type="primary" size="large" @click="goHome" round>返回到首页</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.left {
  margin-top: 150px;
  width: 100%;
  height: 556px;
  background: url(../../assets/images/error_images/404.png) no-repeat;
  background-size: contain;
  background-position: 180px 0;
}
.right {
  margin-top: 150px;
  .info {
    height: 80px;
    line-height: 80px;
    color: #0e7ee8;
    font-size: 36px;
    font-weight: 700;
  }
  .info1{
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    font-weight: 700;
  }
  .info2 {
    color: #999;
  }
}
</style>
